<template>
<div style="height: 100%; width: 100%;">
    <el-container style="height: 100%;">
      <el-header>
        <div class="headerDiv">
          <div class="headerDiv-left">
            <div class="headerDiv-left-title">
              <div style="padding-left: 10px;text-align: center">
                <h2>{{projectTitle}}</h2>
              </div>
            </div>
          </div>
          <div class="headerDiv-left">
            <div class="headerDiv-left-subhead"></div>
          </div>
          <div class="headerDiv-right">
            <el-dropdown style="margin-top: 30px;">
            <span class="el-dropdown-link" style="font-size: 20px; color: #E9EEF3;" >你好，{{userName}}，欢迎回来<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><router-link to="/index/user">修改密码</router-link></el-dropdown-item>
                <el-dropdown-item><span @click="outLogin">退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="250px" class="el-aside">
          <el-menu default-active="1" router class="el-menu-vertical-demo" background-color="#7c0000"
                   unique-opened
                   text-color="#fff"
                   active-text-color="#ffd04b"
                   @select="handleSelect">
            <NavMenu :navMenus="menus"></NavMenu>
          </el-menu>
        </el-aside>
        <el-main style="height: 100%;">
          <div style="width: 100%; height: 100%;">
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import NavMenu from "./NavMenu/NavMenu"

  export default {
    data() {
      return {
        userName: 'xxx',
        userRole: '',
        projectTitle: '雷甸党员积分红管家管理系统',
        menus : []
      }
    },
    created(){
      this.$http({
        url: this.$BASE_URL+'api/user/searchCurrentUserUserInfo',
        headers:{
          token:sessionStorage.getItem("token")
        },
      }).then((res)=>{
//        console.log(res);
        if(res.data.code == 200){
          this.userName = res.data.output.showName;
        }else {
          this.$notify.error({
            title: "错误码："+res.data.code,
            message: res.data.resMessage,
            duration: 5000
          });
        }
      },(res)=>{
        this.$notify.error({
          title: '错误',
          message: "服务器连接故障！",
          duration: 5000
        });
        console.log(res);
      });

      this.$http({
        url: this.$BASE_URL+'api/menu/findMenuByRoleId',
      }).then((res)=>{
        if(res.data.code == 200){
//          console.log(res.data.output);
          this.menus = res.data.output;
        }
      },(res)=>{
        this.$notify.error({
          title: '错误',
          message: "服务器连接故障！",
          duration: 5000
        });
        console.log(res);
      });
    },
    components:{
      NavMenu
    },
    methods: {
      handleSelect(key, keyPath){

      },
      outLogin(){
        this.$http({
          url: this.$BASE_URL+'api/user/outLogin',
          headers:{
            token:sessionStorage.getItem("token")
          },
        })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-header{
    background: url("../../assets/header.jpg") no-repeat;
    background-size:100% 100%;
    padding: 0;
    margin: 0;
    color: #ffffff;
    text-align: left;
    min-height: 90px;
  }

  .el-aside {
    color: #333333;
    margin: 0;
    padding: 0;
  }

  .el-main {
   /* background-color: #E9EEF3;*/
    background: url(../../assets/bj2.jpg);
    background-size: cover;
    color: #333333;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1920px;
  }

  .el-menu-vertical-demo{
    height: 100%;
  }

  .headerDiv{
    height: 90px;
    /*line-height: 90px;*/
  }
  .headerDiv-left{
    float: left;
    height: 90px;
  }

  .headerDiv-left-title{
    font-size: 24px;
  }

  .headerDiv-left-subhead{
    padding-left: 20px;
    color: #dddddd;
    font-size: 18px;
  }

  .headerDiv-right{
    padding-right: 10px;
    float: right;
    height: 90px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }



</style>
